<template>
  <div class="task_container" @keydown.enter="search">
    <div class="task_filter_container">
      <div class="task_filter_search">
        <a-input
          v-model:value="selectedData.search_AND_LIKE_title"
          :placeholder="t('control','请输入任务标题')"
          style="width: 180px; margin-right: 10px"
        />

        <a-select
          ref="select"
          v-model:value="selectedData.search_AND_EQ_status"
          style="width: 120px; margin-right: 10px"
          :placeholder="t('control','任务状态')"
          :options="publishStatusOptions"
        >
        </a-select>

        <a-select
          ref="select"
          v-model:value="selectedData.search_AND_EQ_weekId"
          style="width: 260px; margin-right: 10px"
          :placeholder="t('control','教学周')"
					show-search
					:field-names="{ label: 'name', value: 'id' }"
          :options="teachingWeekOptions"
					:filter-option="filterWeekOption"
        >
        </a-select>
      </div>
      <div class="task_filter_btn">
        <a-button
          type="primary"
          @click="search"
          style="margin-right: 10px"
          >{{ t('control','查询') }}</a-button
        >
        <a-button @click="clear">{{ t('control','重置') }}</a-button>
      </div>
    </div>
    <div class="task_list_container">
      <div class="taskList_table_container">
        <a-table
          :dataSource="tableData"
          :columns="columns"
          :pagination="false"
        >
          <template #bodyCell="{ column, text, record, index }">
            <template v-if="column.dataIndex === 'title'">
							<a-tooltip placement="topLeft">
								<template #title>
									<span>{{ text }}</span>
								</template>
								<span style="display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
									{{ text }}
								</span>
							</a-tooltip>
						</template>

            <template
              v-if="column.key === 'operate'"
              style="text-align: center"
            >
              <div
                style="
                  text-align: center;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <a @click="()=>viewTaskDetail({ record, index })">
                  <a-button v-if="record.status == 1" type="primary"
                    >{{ t('control','去完成') }}</a-button
                  >
                  <template v-if="record.status != 1">{{ t('control','查看') }}</template>
                </a>
              </div>
            </template>
            <!-- <template v-if="column.key === 'status'">
              <a :style="{ color: { 1: 'red', 2: 'black', 3: 'green' }[text] }">
                {{ { 1: t('control','未完成'), 2: t('control','已完成'), 3: t('control','已得分') }[text] }}
              </a>
            </template> -->

            <template v-if="column.key === 'expiredTime'&&record.status > 0&&(( !record.submitTime || dayjs().isAfter(dayjs(record.expiredTime))))">
            	<td :style="{ color: 'red' }">{{ text }}</td>
            </template>
          </template> 
        </a-table>
      </div>
      <a-pagination
        style="
          text-align: center;
          height: 38px;
          display: flex;
          align-items: center;
          justify-content: center;
        "
        @change="show"
        @showSizeChange="search"
        :current="pagination.current"
        :total="pagination.totalElements"
        :pageSize="pagination.size"
				show-size-changer
      />
    </div>
		
	 <studentTaskDetail
    v-model:open="drawerVisible"
    :taskData="currentTask"
		@submit='()=>{show();refreshStudentMessages(pojectInfo)}'
		@update:visible='(data)=>drawerVisible=data'
  />
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs';
import minRangePicker from "@/components/common/minRangePicker.vue";
import studentTaskDetail from "./studentTaskDetail.vue";
import {getStudentTaskList,getStudentTaskDetailById,studentSubmitTask,getWeekList} from '@/request/process/processTask.js'
import { state, refreshStudentMessages } from '@/stores/info.js'
import { t } from '@/i18n'

const route = useRoute()
const router = useRouter()

let pojectInfo = ref(JSON.parse(sessionStorage.getItem('pojectInfo') || '{}'))
let projectId= ref((route.query&&route.query.id)?route.query.id:'')
onMounted(async ()=>{
	show()
	let res=await getWeekList()
	console.log('教学周',res)
	teachingWeekOptions.value=res.data
	
})

function filterWeekOption(input, option){
	return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}


async function show(page,pageSize){
	let req = {
    page: page ? page-1 : pagination.value.current - 1,
    size: pageSize || pagination.value.size,
    ...selectedData,
    search_AND_EQ_projectId: projectId.value
	}
	let res = await getStudentTaskList(req)
	 console.log('任务列表',res)
	if (!res) return
	tableData.value = res.data.content || []
  pagination.value = {
    ...pagination.value,
    current: res.data.page.number + 1,
    totalElements: res.data.page.totalElements,
    size: res.data.page.size
  }
	 console.log('任务列表',tableData,pagination)
}

function search (page,pageSize){
	show(1,pageSize)
}

//过滤查询
let selectedData = reactive({});
const publishStatusOptions = [
  {
    label: t('control','未完成'),
    value: "1",
  },
  {
    label: t('control','已完成'),
    value: "2",
  },
	{
	  label: t('control','已评分'),
	  value: "3",
	},
];
const teachingWeekOptions = ref([])

//点击重置按钮
function clear() {
  for (let key in selectedData) {
    selectedData[key] = undefined; // 重置为默认值
  }
  console.log("selectedData", selectedData);
	show()
  // getProjectSquareList();
}

//任务列表
const columns =reactive( [
	{ title: t('table','序号'), dataIndex: 'index', customRender:({index})=>index+1,},
	{ title: t('table','标题'), dataIndex: 'title', key: 'title' ,width:100},
	{ title: t('table','状态'), dataIndex: 'status', customRender: ({ text }) => {
      const statusMap = {
        0: t('control','未发布'),
        1: t('control','未完成'),
        2: t('control','已完成'),
        3: t('control','已评分')
      };
      return statusMap[text] || '';
    },},
	{ title: t('table','任务类型'), dataIndex: 'type',  customRender: ({ text }) => {
      const statusMap = {
        0: t('control','项目任务'),
        1: t('control','学习任务'),
      };
      return statusMap[text] || '';
    }},
	{ title: t('table','截止日期'), dataIndex: 'expiredTime', key: 'expiredTime', },
	// { title: '发布时间', dataIndex: 'releaseTime', key: 'releaseTime' },
	// { title: '组别', dataIndex: 'name', key: 'name' },
	{ title: t('table','教学周'), dataIndex: 'weekName', key: 'weekName'},
	{ title: t('table','操作'), dataIndex: 'operate', key: 'operate'},
])
let tableData = ref([]);
let pagination = ref({
  totalElements: 0,
  current: 1,
  size: 10,
});
//判断是否已过截止时间
function isDeadlinePassed(deadline) {
  // 将截止时间字符串转换为 Date 对象
  const deadlineDate = new Date(deadline);

  // 获取当前时间
  const currentDate = new Date();

  // 判断当前时间是否大于截止时间
  return currentDate > deadlineDate;
}

//详情抽屉

let drawerVisible = ref(false);
const currentTask = ref({});

async function viewTaskDetail({ record, index }) {
	console.log(record, index)
	let res=await getStudentTaskDetailById(record.id)
	console.log('任务详情',res)
	currentTask.value={...res.data}
	drawerVisible.value=true
}
</script>
<style lang="scss" scoped>
@import "@/styles/public.scss";
$filterContainer: 70px;

.task_container {
  width: 100%;
  height: 100%;
  // border: 1px solid blueviolet;
  border-radius: 10px;
  /* padding:20px; */

  .task_filter_container {
    width: 100%;
    height: $filterContainer;
    padding: 20px;
    // border: 1px solid blue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // border-radius: 10px 10px 0 0;
  }

  .task_list_container {
    width: 100%;
    height: calc(100% - #{$filterContainer});
		padding:15px 20px;
		padding-top:0;
    // border-radius: 0 0 10px 10px;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .taskList_table_container {
      width: 100%;
      height: calc(100% - 38px);
      flex: 1;
      min-height: 0;
      overflow: auto;
      @include hoverShowScrollBar();
    }
  }

  .task_detail_container {
    border: 1px solid grey;
    width: 700px;
  }

  .task-drawer {
    &-content {
      display: flex;
      gap: 24px;
    }

    // 左侧内容样式
    &-left {
      flex: 1;

      .task {
        &-title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 16px;
        }

        &-info {
					font-size:12px;
          margin: 16px 0;
          display: flex;
          flex-direction: column;
          gap: 8px;

          span {
            color: #666;

            &.time {
              margin-left: 8px;
            }
          }
        }

        &-description {
          margin: 24px 0;

          h3 {
            font-size: 16px;
            margin-bottom: 12px;
          }

          p {
            color: #333;
            line-height: 1.6;
          }
        }

        &-answer {
          margin: 24px 0;

          h3 {
            font-size: 16px;
            margin-bottom: 12px;
          }

          .ant-textarea {
            &.disabled {
              background-color: #f5f5f5;
              cursor: not-allowed;
            }
          }
        }

        &-attachments {
          margin: 24px 0;

          h3 {
            font-size: 16px;
            margin-bottom: 12px;
          }

          &.disabled {
            opacity: 0.6;
            cursor: not-allowed;
          }
        }
      }
    }

    // 右侧内容样式
    &-right {
      width: 240px;
      padding-left: 24px;
      border-left: 1px solid #f0f0f0;

      .info-item {
        margin-bottom: 16px;

        .label {
          color: #666;
          display: inline-block;
          width: 80px;
        }

        .value {
          color: #333;
        }
      }
    }

    // 底部按钮样式
    &-footer {
      display: flex;
      gap: 8px;
      justify-content: flex-end;

      .ant-btn {
        min-width: 88px;

        &:not(:last-child) {
          margin-right: 8px;
        }
      }
    }
  }

  // 状态相关样式
  .status {
    &-pending {
      color: #faad14;
    }

    &-completed {
      color: #52c41a;
    }

    &-scored {
      color: #1890ff;
    }
  }
}
</style>
